<template>
  <div class="sms-template-create">
    <!-- 页面标题 -->
    <el-card shadow="hover" header="物料管理-短信模板管理-创建短信模板">
      <el-form
        ref="smsTemplateForm"
        :model="form"
        label-width="200px"
        size="medium"
      >
        <!-- 短信模板名称 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="短信模板名称" prop="templateName">
              <el-input
                v-model="form.templateName"
                placeholder="请输入短信模板名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 模板类型 -->
            <el-form-item label="模板类型" prop="templateType">
              <el-select
                v-model="form.templateType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in templateTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- 总行基础模板编号 -->
            <el-form-item label="总行基础模板编号" prop="baseTemplateCode">
              <el-select
                v-model="form.baseTemplateCode"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in baseTemplateCodeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 模板内容 -->
        <el-form-item label="模板内容">
          <div class="temp_main" ref="refTempMain"></div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="insertProperty"
          >
            插入属性
          </el-button>
          <div class="tip">
            一条短信为64字符，超过该字符数则拆分为多条短信发送
          </div>
        </el-form-item>

        <!-- 预览展示 -->
        <el-form-item label="预览展示">
          <div class="preview-text">{{ previewContent }}</div>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "SmsTemplateCreate",
  data() {
    return {
      isInsert: false,
      // 表单数据
      form: {
        templateName: "",
        templateType: "",
        baseTemplateCode: "",
        // "您好，【分行名称】为【备注】的【性别】，请尽快参与【活动名称】活动，自定义输入内容 退订回复R",
      },
      textContent: "", // 编辑div中的文本内容
      templateOragin: [
        "您好",
        [
          {
            id: "001",
            name: "【分行名称】",
            type: "input",
            value: "【分行名称】",
          },
          {
            id: "",
            name: "【备注】",
            value: "备注值",
            type: "",
          },
          {
            id: "003",
            name: "【性别】",
            value: "【性别】",
            type: "select",
          },
        ],
        "为",
        [
          {
            id: "004",
            name: "【活动名称】",
            value: "【活动名称】",
            type: "input",
          },
          {
            id: "",
            name: "",
            value: "dd",
            type: "",
          },
        ],
        "的",
        [
          {
            id: "005",
            name: "【姓名】",
            value: "【姓名】",
            type: "input",
          },
        ],
      ],
      // 模板类型下拉选项（示例，可替换为接口数据）
      templateTypeOptions: [
        { label: "营销类", value: "marketing" },
        { label: "通知类", value: "notice" },
        { label: "提醒类", value: "remind" },
      ],
      // 总行基础模板编号下拉选项（示例，可替换为接口数据）
      baseTemplateCodeOptions: [
        { label: "BASIC_TEMPLATE_001", value: "BASIC_TEMPLATE_001" },
        { label: "BASIC_TEMPLATE_002", value: "BASIC_TEMPLATE_002" },
      ],
      // 属性列表，用于插入（可扩展）
      properties: ["【分行名称】", "【备注】", "【性别】", "【活动名称】"],
      tagListMain: [
        {
          id: "001",
          name: "【分行名称】",
          type: "input",
          value: "分行名称】",
        },
        {
          id: "002",
          name: "【备注】",
          type: "input",
          value: "分行名称】",
        },
        {
          id: "003",
          name: "【性别】",
          type: "select",
          value: "【性别】",
        },
        {
          id: "004",
          name: "【活动名称】",
          type: "input",
          value: "【活动名称】",
        },
        {
          id: "005",
          name: "【姓名】",
          type: "input",
          value: "【姓名】",
        },
      ],
      selection: null,
    };
  },
  computed: {
    // 预览内容，简单模拟变量替换（实际可根据需求完善）
    previewContent() {
      let content = "";
      this.templateOragin.forEach((ele) => {
        if (typeof ele === "string") {
          content += ele;
        } else if (Array.isArray(ele)) {
          ele.forEach((eleIn) => {
            if (typeof eleIn === "string") {
              content += eleIn;
            } else if (typeof eleIn === "object") {
              content += eleIn.value;
            }
          });
        }
      });
      return content;
    },
  },
  mounted() {
    console.log("--mounted--");
    this.renderTemplateContent();
  },
  methods: {
    renderTemplateContent() {
      const container = this.$refs.refTempMain;
      console.log("--container--", container);
      container.innerHTML = ""; // 清空容器
      this.templateOragin.forEach((item,) => {
        if (Array.isArray(item)) {
          const editableDiv = document.createElement("div");
          editableDiv.className = "temp_flex";
          editableDiv.setAttribute("contenteditable", "true");
          editableDiv.setAttribute("data-index", index);
          editableDiv.addEventListener("blur", this.inputBlur);
          item.forEach((itemIn) => {
            if (!itemIn.id) {
              editableDiv.appendChild(document.createTextNode(itemIn.value));
              return;
            }
            const element = document.createElement("div");
            element.className = "temp_tag";
            element.setAttribute("contenteditable", "false");
            element.style.display = "inline-block";

            // 生成并设置 data-id 属性
            const dataId = JSON.stringify({
              id: item.id,
              name: item.name,
              type: item.type,
              value: item.value,
            }).replace(/"/g, "&quot;");
            element.setAttribute("data-id", dataId);

            element.textContent = item.name;
            editableDiv.appendChild(element);
          });
          container.appendChild(editableDiv);
        } else {
          container.appendChild(document.createTextNode(item.value));
        }
      });
      // this.templateOragin.forEach((item, index) => {
      //   if (Array.isArray(item)) {
      //     const editableDiv = document.createElement("div");
      //     editableDiv.className = "temp_flex";
      //     editableDiv.setAttribute("contenteditable", "true");
      //     editableDiv.setAttribute("data-index", index);
      //     editableDiv.addEventListener("blur", this.inputBlur);

      //     item.forEach((itemIn) => {
      //       const div = document.createElement("div");
      //       div.style.display = "inline-block";
      //       div.setAttribute("data-id", JSON.stringify(itemIn));
      //       div.textContent = itemIn.value;

      //       if (itemIn.type) {
      //         div.classList.add("temp_tag");
      //         div.setAttribute("contenteditable", "false");
      //       } else {
      //         div.setAttribute("contenteditable", "true");
      //       }

      //       editableDiv.appendChild(div);
      //     });

      //     container.appendChild(editableDiv);
      //   } else if (typeof item === "string") {
      //     const div = document.createElement("div");
      //     div.setAttribute("data-id", item);
      //     div.textContent = item;
      //     container.appendChild(div);
      //   }
      // });
    },

    // 修改后的 inputBlur 方法
    inputBlur() {
      let _this = this;
      console.log("--inputBlur--");
      _this.selection = window.getSelection();
      setTimeout(() => {
        if (_this.isInsert) return;
        _this.convertDomToTemplate(1);
      }, 100);
    },

    // 插入属性到模板内容
    insertProperty() {
      let _this = this;
      _this.isInsert = true;
      // 先检查是否有选中文本
      if (!_this.selection || _this.selection.rangeCount === 0) {
        _this.$message.warning("请先在模板内容中点击定位光标位置");
        return;
      }
      console.log("--insertProperty--");
      _this.insertData();
      setTimeout(() => {
        console.log("--insertProperty2--");
        _this.isInsert = false;
      }, 1000);
    },

    insertData() {
      const selection = this.selection;
      if (selection && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        // 创建包含属性的元素
        const attributeDiv = document.createElement("div");
        // 这里使用第一个标签作为示例，实际可以根据需求选择标签
        const dataId = this.tagListMain[0];
        attributeDiv.className = "temp_tag";
        attributeDiv.contentEditable = false;
        attributeDiv.setAttribute("data-id", JSON.stringify(dataId));
        attributeDiv.textContent = dataId.name;
        console.log("--attributeDiv--", attributeDiv, dataId);

        // 插入节点
        range.insertNode(attributeDiv);
        // 将光标移动到新插入的节点后面
        range.setStartAfter(attributeDiv);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);

        // 根据当前DOM结构重新生成templateOragin
        this.convertDomToTemplate(2);
      }
    },
    // dom转data
    convertDomToTemplate(val) {
      const mainContainer = this.$refs.refTempMain;
      const templateOragin = [];

      // 遍历主容器的直接子元素
      let mArr = mainContainer.children;
      console.log("--mainDom--", mainContainer);

      Array.from(mArr).forEach((child) => {
        // 处理文本节点（非temp_flex类元素）
        if (!child.classList.contains("temp_flex")) {
          templateOragin.push(child.textContent.trim());
          return;
        }

        // 处理temp_flex容器（生成对象数组）
        const flexItems = [];
        Array.from(child.children).forEach((item) => {
          // 解析data-id属性（处理JSON格式）
          const dataId = item.getAttribute("data-id");
          let itemData = { id: "", name: "", type: "", value: "" };

          if (dataId && dataId !== "{}") {
            try {
              // 解析JSON格式的data-id
              const parsed = JSON.parse(dataId.replace(/&quot;/g, '"'));
              itemData = {
                id: parsed.id || "",
                name: parsed.name || "",
                type: parsed.type || "",
                value: parsed.value || "",
              };
            } catch (e) {
              // 非JSON格式的节点（如"dd"）
              itemData.value = item.textContent.trim();
            }
          } else {
            // 无有效data-id的节点（如"dd"）
            itemData.value = item.textContent.trim();
          }

          flexItems.push(itemData);
        });

        templateOragin.push(flexItems);
      });
      console.log("--templateOragin--", val, templateOragin);

      this.templateOragin = templateOragin;
    },

    // 保存
    handleSave() {
      this.$refs.smsTemplateForm.validate((valid) => {
        if (valid) {
          // 这里可调用接口提交表单数据：this.form
          this.$message.success("表单验证通过，可提交接口保存");
          // 示例：调用 saveTemplate 接口
          // this.$api.smsTemplate.save(this.form).then(res => {
          //   if (res.success) {
          //     this.$message.success('保存成功');
          //     this.$router.back();
          //   } else {
          //     this.$message.error('保存失败：' + res.msg);
          //   }
          // });
        } else {
          this.$message.error("请完善表单必填项");
        }
      });
    },
    // 取消
    handleCancel() {
      this.$refs.smsTemplateForm.resetFields();
      this.$router.back();
    },
    // 处理内容变化
    handleContentChange(event) {
      const newContent = event.target;
      console.log("内容变化:", newContent.textContent);
      // 这里可以更新数据或执行其他操作
      // 例如：this.form.templateContent = newContent;
    },
  },
};
</script>

<style>
.sms-template-create {
  padding: 20px;
}
.tip {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
}
.temp_main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 6px;
  letter-spacing: 1px;
}
.temp_flex {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 10px;
  line-height: 20px;
  border-radius: 4px;
}
.temp_tag {
  display: inline-block;
  line-height: 20px;
  color: blue;
  border: 1px solid blue;
  /* margin: 0 10px; */
  border-radius: 4px;
}
/* :focus-visible {
  outline: none;
} */
.preview-text {
  text-align: left;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 6px;
  letter-spacing: 1px;
}
</style>